<template>
  <!-- contact -->
  <div class="contact-box">
    <heading-title title="Contact Us" />
    <div class="contact-container">
      <span>{{ "NAME" }}</span>
      <div>
        <input v-model="info.name" type="text" />
        <p v-show="firstShow">{{ "This is a required field." }}</p>
      </div>
      <span>EMAIL</span>
      <div>
        <input v-model="info.email" type="text" />
        <p v-show="emailShow">{{ "This is a required field." }}</p>
      </div>
      <span>PHONE NUMBER</span>
      <div>
        <input v-model="info.phone" />
      </div>
      <span>COMMENT</span>
      <div>
        <textarea class="textarea-box" v-model="info.textarea" rows="6" />
        <p v-show="conmentShow">{{ "This is a required field." }}</p>
      </div>
      <div>
        <el-checkbox v-model="info.checked">{{
          "I have read and accept the privacy policy.*"
        }}</el-checkbox>
        <p v-show="checkedShow">{{ "This is a required field." }}</p>
      </div>
      <div class="btn" @click="submit">
        {{ "Submit" }}
      </div>
      <p class="forget-text">
        This site is protected by reCAPTCHA and the Google
        <span @click="creatElement(true)" >Privacy Policy</span> and <span @click="creatElement(false)">Terms of Service apply</span>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: {
        checked: false
      },
      firstShow: false,
      emailShow: false,
      conmentShow: false,
      checkedShow: false
    };
  },

  components: {
    HeadingTitle: () => import("_c/HeadingTitle")
  },

  computed: {},

  beforeMount() {},

  mounted() {},

  methods: {
    // 登录
    submit() {
      if (!this.info.name) this.firstShow = true;
      else this.firstShow = false;
      if (!this.info.email) this.emailShow = true;
      else this.emailShow = false;
      if (!this.info.textarea) this.conmentShow = true;
      else this.conmentShow = false;
      if (!this.info.checked) this.checkedShow = true;
      else this.checkedShow = false;
		},
		creatElement(id) {
			let a = document.createElement('a');
			a.href = id?'https://policies.google.com/privacy': 'https://policies.google.com/terms';
			a.target = '_banlk'
			a.click();
		}
  },

  watch: {}
};
</script>
<style lang="scss" scoped>
.contact-box {
  .contact-container {
    max-width: 620px;
    margin: 0 auto 40px;
    padding: 0 10px;
    span {
      font-size: 12px;
      color: #969696;
      &::after {
        content: "*";
        padding-left: 2px;
        color: #969696;
        font-size: 12px;
        margin: 0 0 0 5px;
      }
    }
    input {
      width: 100%;
      height: 30px;
      border: 0;
      border-bottom: 1px solid #e2e2e2;
      margin-bottom: 10px;
      outline: 0;
      font-size: 14px;
      color: #000;
      padding: 5px 0;
      border-radius: 5px;
      &:focus {
        border-bottom-color: #1a1a1a;
      }
    }
    p {
      font-size: 12px;
      color: #e02b27;
      margin: 0;
      &.tips {
        color: #1a1a1a;
        font-size: 14px;
        margin-bottom: 10px;
      }
    }
    & > div {
      margin-bottom: 29px;
    }
    p.forget-text {
			color: #969696;
			span {
				text-decoration: underline;
				cursor: pointer;
				&::after {
					content: '';
				}
			}
    }
    div.btn {
      width: 300px;
      height: 50px;
      line-height: 50px;
      background: #000;
      border-color: #000;
      color: #fff;
      font-weight: 500;
      text-align: center;
      cursor: pointer;
      margin-bottom: 15px;
    }
    .textarea-box {
      width: 100%;
      border: 0;
      border-bottom: 1px solid #e2e2e2;
      outline: none;
      border-radius: 0 0 5px 5px;
      &:focus {
        border-bottom-color: #1a1a1a;
      }
    }
  }
}
</style>
